import BaseSlider from "./base.js";
import keyboard from "./keyboard.js";
import btnClick from "./btnClick.js";

// 继承基类
class Slider extends BaseSlider {
  constructor(el, options) {
    super(el, options);

    this.idx = this.currIndex;

    this.bindEvent();

    this.setCircles();
 
  }

  bindEvent() {
    keyboard.bindEvent(this);
    btnClick.bindEvent(this);
  }
  autoplay() {
    const { autoplay } = this.options;
    if (autoplay <= 0) return;

    this.pause();
    this.autoplayTimer = setInterval(() => {
      this.next();

      this.idx++;
      
      this.setCircles();

    
    }, autoplay)
  }

  setCircles() {
    const circles_lis = document.querySelectorAll("#circles li");
    const length = circles_lis.length;

    for (let i = 0; i < length; i++) {
      // 前面 %5 是为了  右按钮的点击事件  因为有一瞬间index为5 500毫秒之后index才为0
      // 这里 % 5非常巧妙  1,2,3,4除以5的余数就是他本身 , 但是到了5的时候 5除以5的余数是0
      if (i === this.idx % 5) {
        circles_lis[i].classList.add("cur");
      } else {
        circles_lis[i].classList.remove("cur");
      }
    }
  }

}

    

export default Slider;

